<template>
  <div class="qa-page">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/english" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">答疑</h5>
    </div>

    <!-- 问答列表 -->
    <div class="qa-container">
      <qa-card
        v-for="question in questions"
        :key="question.id"
        :question="question"
      />
    </div>
    <!-- 分页按钮 -->
    <div class="pagination d-flex justify-content-center mt-3">
      <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-outline-secondary mr-2">上一页</button>
      <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-outline-secondary">下一页</button>
    </div>
    <!-- 发布问题按钮 -->
    <router-link to="/qa-add" class="floating-btn border-0">
      <i class="bi bi-plus-lg fs-4"></i>
    </router-link>

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="d-flex justify-content-around">
        <div class="text-center">
          <router-link to="/english" class="text-decoration-none text-dark">
            <i class="bi bi-house-door"></i>
            <div>首页</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/qa" class="text-decoration-none text-dark">
            <i class="bi bi-chat-dots-fill"></i>
            <div>答疑</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/profile" class="text-decoration-none text-dark">
            <i class="bi bi-person"></i>
            <div>我的</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QaCard from './QaCard.vue'
import http from '@/router/http';
import router from "@/router/index";
export default {
  name: 'QaView',
  components: {
    QaCard
  },
  data() {
    return {
      questions: [
      ],
      currentPage: 1, // 当前页码，初始化为1
      pageSize: 10, // 每页显示的记录数
      totalPages: 0, // 总页数
    }
  },
  mounted() {
    this.fetchQuestions();
  },
  methods: {
    async fetchQuestions() {
      try {
        const response = await http.get(`/student/message/messgeList?page=${this.currentPage}&size=${this.pageSize}`);
        this.questions = [];
        // 假设后端接口返回的数据格式包含data和total两个字段
        const  total  = response.data.response.total;
        const  data = response.data.response.list;
        const baseUrl = http.defaults.baseURL || "";
        data.forEach(item => {
          this.questions.push({
            id: item.messageId,
            username: item.user.userName,
            subject: item.subjectName,
            subjectId: item.subjectId,
            time: item.timeStr,
            content: item.publishContent,
            answers: item.replyCount,
            likes: item.likes,
            image: item.contentImageAddress,
            avatar: baseUrl + "/uploadPath" + item.user.imagePath,
          })
        })
        this.totalPages = Math.ceil(total / this.pageSize);
      } catch (error) {
        console.error('获取问题数据失败：', error);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchQuestions();
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchQuestions();
      }
    }
  }
}
</script>

<style scoped>
.qa-page {
  background-color: #f0f9f9;
  padding-bottom: 60px;
  min-height: 100vh;
}
.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.qa-container {
  padding: 15px;
}
.floating-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: #00b8a9;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 10px 0;
  border-top: 1px solid #eee;
  z-index: 1000;
}
</style> 